<template>
	<div class="page pageFixed">
		<custom-box customback title="成长宝箱" @back="back">
			<div class="treasurechest">
				<div class="treasurechest_tab flex jlr jlr">
					<div class="item" :class="{'on':active==0}" @click="tab(0)">全部宝箱</div>
					<div class="item" :class="{'on':active==1}" @click="tab(1)">成长宝箱</div>
					<div class="item" :class="{'on':active==2}" @click="tab(2)">任务宝箱</div>
				</div>
				<div class="treasurechest_body flex wrap">
					<!-- <div class="item" v-for="(item,index) in list" :class="{'disabled':item.state==0,'lock':item.state==2}" @click="next(item.state)">
						<div class="icon flex a-center j-center">
							<div class="img" :class="'i'+index"></div>
						</div>
						<div class="lockFix" v-if="item.state==2"></div>
						<div class="text">
							<template v-if="item.state==1">领取积分</template>
							<template v-else>开学礼品宝箱</template>
						</div>
						<div class="slid-text">+200</div>
					</div> -->
					<swiper-box @change="swiperChange" ref="swiper">
						<swiper-item>
							<div class="scroll">
								<div class="flex wrap">
									<div class="item" v-for="(item,index) in treasureBoxList" :class="{'disabled':item.status==0,'lock':item.status==2}" @click="next(item.status)">
										<div class="icon flex a-center j-center">
											<div class="img">
												<template v-if="item.status==0">
													<!-- <img src="../../assets/img/box/Treasurechest_disabled.png"> -->
													<img :src="item.img">
												</template>
												<template v-else-if="item.status==1">
													<!-- <img src="../../assets/img/box/Treasurechest01.png"> -->
													<img :src="item.img">
												</template>
												<template v-else>
													<!-- <img src="../../assets/img/box/Treasurechest_open01.png"> -->
													<img :src="item.img">
												</template>
											</div>
										</div>
										<div class="lockFix" v-if="item.status==2"></div>
										<div class="text" :class="{'submit':item.status==1}">
											<template v-if="item.status==1">领取积分</template>
											<template v-else>{{ item.name }}</template>
										</div>
										<div class="slid-text">+{{ item.points }}</div>
									</div>
								</div>
							</div>
						</swiper-item>
						<!-- <swiper-item>
							<div class="scroll">
								<div class="flex wrap">
									<div class="item" v-for="(item,index) in list" :class="{'disabled':item.state==0,'lock':item.state==2}" @click="next(item.state)">
										<div class="icon flex a-center j-center">
											<div class="img">
												<template v-if="item.state==0">
													<img src="../../assets/img/box/Treasurechest_disabled.png">
												</template>
												<template v-else-if="item.state==1">
													<img src="../../assets/img/box/Treasurechest01.png">
												</template>
												<template v-else>
													<img src="../../assets/img/box/Treasurechest_open01.png">
												</template>
											</div>
										</div>
										<div class="lockFix" v-if="item.state==2"></div>
										<div class="text">
											<template v-if="item.state==1">领取积分</template>
											<template v-else>开学礼品宝箱</template>
										</div>
										<div class="slid-text">+200</div>
									</div>
								</div>
							</div>
						</swiper-item>
						<swiper-item>
							<div class="scroll">
								<div class="flex wrap">
									<div class="item" v-for="(item,index) in list" :class="{'disabled':item.state==0,'lock':item.state==2}" @click="next(item.state)">
										<div class="icon flex a-center j-center">
											<div class="img">
												<template v-if="item.state==0">
													<img src="../../assets/img/box/Treasurechest_disabled.png">
												</template>
												<template v-else-if="item.state==1">
													<img src="../../assets/img/box/Treasurechest01.png">
												</template>
												<template v-else>
													<img src="../../assets/img/box/Treasurechest_open01.png">
												</template>
											</div>
										</div>
										<div class="lockFix" v-if="item.state==2"></div>
										<div class="text">
											<template v-if="item.state==1">领取积分</template>
											<template v-else>开学礼品宝箱</template>
										</div>
										<div class="slid-text">+200</div>
									</div>
								</div>
							</div>
						</swiper-item> -->
					</swiper-box>
				</div>
			</div>
		</custom-box>
	</div>
</template>

<script>
import { getTreasure } from '../../api/modules/treasure';
export default {
	data(){
		return {
			active:0,
			list:[{state:0},{state:0},{state:1},{state:1},{state:2},{state:2},{state:2},{state:2},{state:2}],
			static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			glbId: getApp().globalData.glb_list.glbId, // 获取全局的id
			treasureBoxList: [], // 列表数据
			transferTreasureBoxList: [], // 列表数据中转站
		}
	},
	mounted() {
		this._getTreasure({page_no: 1, page_size: 10000})
	},
	methods:{
		swiperChange(i){
			console.log('swiperChange',)
			this.active = i;
		},
		next(state){
			/*接收状态并且返回到Home页面*/
			if(state){//0已经开过状态，点击无反应
				this.$emit('next',state);
			}			
		},
		back(){
			this.$emit('back')
		},
		tab(i){
			var swiper = this.$refs['swiper'];
			this.active = i
			swiper.slideTo(i)
			if (i === 1) {
				this.treasureBoxList = this.transferTreasureBoxList.filter((item) => item.type == 1)
			} else if (i === 2) {
				this.treasureBoxList = this.transferTreasureBoxList.filter((item) => item.type == 2)
			} else {
				this.treasureBoxList = this.transferTreasureBoxList
			}
			
		},
		_getTreasure() {  // 宝箱管理的页面数据
			getTreasure().then((res) => {
				const { code, data } = res || {};
				let newList = [];
				if (code === 200) {
					this.treasureBoxList = data.list.map((i) => ({...i, img: `${this.static_uri}${i.avatar}`})).filter(i => i.sid === this.glbId);

					console.log('--treasureBoxList', this.treasureBoxList, this.static_uri)

					this.transferTreasureBoxList = data.list.map((i) => ({...i, img: `${this.static_uri}${i.avatar}`})).filter(i => i.sid === this.glbId);
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">	
	.treasurechest_tab{
		width: 100%; height: .8rem; margin-top: -.1rem;
		.item{width:1.92rem; height: .8rem; padding-top: .1rem; text-align: center; font-size: .26rem; line-height: .6rem; color: #92603B;}
		.on{ background: url('../../assets/img/treasurechest_tab.png') no-repeat; background-size: 100% 100%; color: #fff;}
	}
	.treasurechest_body{
		width: 100%; height: calc(100% - 0.8rem); margin-top: .1rem;
		.item{width: 1.8rem; height: 2.07rem; position: relative; margin: .1rem .1rem;}
		.icon{width: 1.8rem; height: 1.8rem; border: 4px solid #B14D07; border-radius: 20px; background: linear-gradient(151deg, #FFFFFF 0%, #FFE39F 100%);}
		.icon .img{
			width: 1.4rem; height:1.16rem; display: flex; justify-content: center; align-items: center;
			&.i0{background: url('../../assets/img/box/Treasurechest_open01.png') no-repeat; background-size: 100% 100%;}
			&.i1{background: url('../../assets/img/box/Treasurechest_open02.png') no-repeat; background-size: 100% 100%;}
			&.i2{background: url('../../assets/img/box/Treasurechest_open03.png') no-repeat; background-size: 100% 100%;}
			&.i3{background: url('../../assets/img/box/Treasurechest_open04.png') no-repeat; background-size: 100% 100%;}
			&.i4{background: url('../../assets/img/box/Treasurechest_open05.png') no-repeat; background-size: 100% 100%;}
			&.i5{background: url('../../assets/img/box/Treasurechest_open06.png') no-repeat; background-size: 100% 100%;}
			&.i6{background: url('../../assets/img/box/Treasurechest_open07.png') no-repeat; background-size: 100% 100%;}
			&.i7{background: url('../../assets/img/box/Treasurechest_open08.png') no-repeat; background-size: 100% 100%;}
		}
		.icon .img img{display: block; object-fit: contain;}
		.text{
			width: 1.48rem;
			line-height: .55rem;
			background: url('../../assets/img/button.png') no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			color: #fff;
			font-size: .22rem;
			text-align: center;
			border-radius: .3rem;
		}
		.slid-text{position: absolute; right: 0; top: 0.1rem; background: rgba(255,255,255,0.6); line-height: 0.4rem; border-radius: .2rem 0 0 .2rem; padding: 0px .15rem; font-size: .2rem; color: #F84638; z-index: 9;}
		.item.disabled{
			.icon{border-color: #BCBCBC !important; background: linear-gradient(151deg, #FFFFFF 0%, #EAEAEA 100%);}
			// .img{background: url('../../assets/img/box/Treasurechest_disabled.png') no-repeat !important; background-size: 100% 100%;}
			.text{background: linear-gradient(151deg, #FFFFFF 0%, #EAEAEA 100%) !important; color: #B14D07; border: 2px solid #BCBCBC;}
		}
		.item.lock{
			.img{
				width: 1.4rem; height: 0.94rem;
				&.i0{background: url('../../assets/img/box/Treasurechest01.png') no-repeat !important; background-size: 100% 100%;}
				&.i1{background: url('../../assets/img/box/Treasurechest02.png') no-repeat !important; background-size: 100% 100%;}
				&.i2{background: url('../../assets/img/box/Treasurechest03.png') no-repeat !important; background-size: 100% 100%;}
				&.i3{background: url('../../assets/img/box/Treasurechest04.png') no-repeat !important; background-size: 100% 100%;}
				&.i4{background: url('../../assets/img/box/Treasurechest05.png') no-repeat !important; background-size: 100% 100%;}
				&.i5{background: url('../../assets/img/box/Treasurechest06.png') no-repeat !important; background-size: 100% 100%;}
				&.i6{background: url('../../assets/img/box/Treasurechest07.png') no-repeat !important; background-size: 100% 100%;}
				&.i7{background: url('../../assets/img/box/Treasurechest08.png') no-repeat !important; background-size: 100% 100%;}
			}
			.lockFix{position: absolute; z-index: 2; left: 0; top: 0; background: rgba(0,0,0,0.6); width: 100%; height: 100%; border-radius: 20px;}
			.lockFix::before{content: ''; display: block; width: .56rem; height: .76rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-80%); background: url('../../assets/img/lock.png') no-repeat; background-size: 100% 100%;}
			.text{
				background: #FFF6DA;
				border-radius: 31px;
				border: 2px solid #F6B560;
				color:#B14D07;
				z-index: 9;
			}
		}
		
	}
</style>